<!-- 主页 -->
<template>
  <div>
        <div class="banner">
            <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide>
                    <div class="banner-wrap">
                        <img v-if="dpr===1" src="../../images/home/banner_1.png" alt="banner-1" :data="dpr" class="banner-img">
                        <img v-if="dpr===2" src="../../images/home/banner_1@2x.png" alt="banner-1" :data="dpr" class="banner-img">
                        <img v-if="dpr===3" src="../../images/home/banner_1@3x.png" alt="banner-1" :data="dpr" class="banner-img">
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="banner-wrap">
                        <img v-if="dpr===1" src="../../images/home/banner_1.png" alt="banner-1" :data="dpr" class="banner-img">
                        <img v-if="dpr===2" src="../../images/home/banner_1@2x.png" alt="banner-1" :data="dpr" class="banner-img">
                        <img v-if="dpr===3" src="../../images/home/banner_1@3x.png" alt="banner-1" :data="dpr" class="banner-img">
                    </div>
                </swiper-slide>
                <swiper-slide>
                    <div class="banner-wrap">
                        <img v-if="dpr===1" src="../../images/home/banner_1.png" alt="banner-1" :data="dpr" class="banner-img">
                        <img v-if="dpr===2" src="../../images/home/banner_1@2x.png" alt="banner-1" :data="dpr" class="banner-img">
                        <img v-if="dpr===3" src="../../images/home/banner_1@3x.png" alt="banner-1" :data="dpr" class="banner-img">
                    </div>
                </swiper-slide>
            </swiper>
        </div>
        <div class="car-msg">
            <div class="title">完善车辆信息</div>
            <div class="content">
                <div class="car">
                    <div class="car-empty" v-if="!carModel">
                        <span class="model">车型车系：</span>
                        <div class="model-wrap">
                            <span class="cont">请选择车型/车系</span>
                        </div>
                        <img class="arow" src="../../images/home/arow.png" alt="">
                    </div>
                    <div class="car-selected" v-if="carModel">
                        <div class="icon">
                            <img src="../../images/home/car-icon.png" alt="">
                        </div>
                        <div class="model-wrap">
                            <span class="brand">东风本田-思域</span>
                            <span class="type">思域2017款 180TURBO 手动舒适版</span>
                        </div>
                        <img class="arow" src="../../images/home/arow.png" alt="">
                    </div>
                </div>
                <div class="mileage">
                    <div class="mileage-title"><span>里</span><span>程：</span></div>
                    <input type="number" class="number" placeholder="请输入里程">
                </div>
                <div class="empty"></div>
                <div class="go">去保养</div>
            </div>
        </div>
        <div class="message">
            <div class="title">
                <div class="line"></div>
                <div>车网通让你养车更轻松</div>
                <div class="line"></div>
            </div>
            <ul class="icon-list">
                <li>
                    <img src="../../images/home/quality.png" alt="正品低价">
                    <span>正品低价</span>
                </li>
                <li>
                    <img src="../../images/home/service.png" alt="4S店服务">
                    <span>4S店服务</span>
                </li>
                <li>
                    <img src="../../images/home/personality.png" alt="个性选择">
                    <span>个性选择</span>
                </li>
                <li>
                    <img src="../../images/home/customer.png" alt="售后无忧">
                    <span>售后无忧</span>
                </li>
            </ul>
        </div>
        <div class="nav">
            <div class="item">
                <img src="../../images/home/maintain.png" alt="">
                <span class="active">保养</span>
            </div>
            <div class="item">
                <img src="../../images/home/order.png" alt="">
                <span>订单</span>
            </div>
            <div class="item">
                <img src="../../images/home/my.png" alt="">
                <span>我的</span>
            </div>
        </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
    name: 'home',
    data () {
        return {
            swiperOption: {
            },
            dpr: 1,
            carModel: true
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    computed: {
        swiper () {
            return this.$refs.mySwiper.swiper
        }
    },
    created () {
        // 获取设备dpr值
        this.dpr = window.devicePixelRatio
    },
    mounted () {
        this.swiper.slideTo(1, 1000, false)
    },
    methods: {
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.banner {
    width: 690px;
    margin: 0 auto;
    padding-top: 20px;
    .banner-wrap {
        width: 670px;
        height: 280px;
        line-height: 280px;
        margin: 0 auto;
        text-align: center;
        transition: 0.2s all;
    }
    .banner-img {
        width: 90%;
        height: 90%;
        transition: 0.2s all;
    }
}
.car-msg {
    width: 690px;
    height: 450px;
    box-shadow: 4px 0px 10px rgba(46,46,46,0.2);
    margin: 20px auto 0 auto;
    border-radius: 30px;
    position: relative;
    .title {
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-bottom: 1px solid #dbdbdb;
        color: #111;
        font-size: 36px;
    }
    .content {
        background: #fff;
        border-radius: 0 0 30px 30px;
        .car {
            width: 610px;
            height: 120px;
            margin: 0 auto;
            border-bottom: 1px solid #eaeaea;
            .car-empty {
                height: 120px;
                line-height: 120px;
                position: relative;
                display: flex;
                .model {
                    color: #666;
                    font-size: 28px;
                }
                .model-wrap {
                    width: 450px;
                    .cont {
                        color: #222222;
                        font-size: 28px;
                        margin-left: 10px;
                    }
                }
                .arow {
                    width: 18px;
                    height: 32px;
                    position: absolute;
                    right: 0px;
                    top: 44px;
                }
            }
            .car-selected {
                height: 120px;
                line-height: 120px;
                position: relative;
                display: flex;
                .icon {
                    width: 80px;
                    height: 80px;
                    margin-right: 38px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .model-wrap {
                    width: 460px;
                    overflow: hidden;
                    line-height: 36px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .brand {
                        color: #333333;
                        font-size: 30px;
                    }
                    .type {
                        color: #666666;
                        font-size: 28px;
                    }
                }
                .arow {
                    width: 18px;
                    height: 32px;
                    position: absolute;
                    right: 0px;
                    top: 44px;
                }
            }
        }
        .mileage {
            width: 610px;
            height: 120px;
            line-height: 120px;
            margin: 0 auto;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            .mileage-title {
                color: #666;
                font-size: 28px;
                width: 140px;
                display: flex;
                justify-content: space-between;
            }
            .number {
                width: 400px;
                color: #222222;
                font-size: 28px;
                border: none;
                background: none;
                margin-left: 10px;
            }
            input::-webkit-input-placeholder{
                color: #222222;
            }
            input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color: #222222;
            }
            input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color: #222222;
            }
            input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                color: #222222;
            }
        }
        .empty {
            height: 108px;
            margin: 0 auto;
        }
    }
    .go {
        width: 510px;
        height: 90px;
        line-height: 90px;
        text-align: center;
        background: #f22e2e;
        color: #fff;
        font-size: 30px;
        position: absolute;
        bottom: -40px;
        left: 50%;
        border-radius: 45px;
        margin-left: -255px;
    }
}
.message {
    margin: 76px auto 122px auto;
    width: 690px;
    height: 240px;
    background: #fff;
    border-radius:20px;
    box-shadow:4px 0px 10px rgba(46,46,46,0.2);
    .title {
        color: #333;
        font-size: 28px;
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        .line {
            width: 68px;
            height: 1px;
            background: #999;
            margin: 0 12px;
        }
    }
    .icon-list {
        display: flex;
        li {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 28px;
            img {
                height: 64px;
                margin-bottom: 24px;
            }
        }
    }
}
.nav {
    position: fixed;
    bottom: 0;
    width: 750px;
    height: 100px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20px;
        color: #333;
        .active {
            color: #F22E2E;
        }
        img {
            height: 35px;
            margin-bottom: 8px;
        }
    }
}
</style>
